<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-aside {
            color: #333;
        }

        h1 {
            float: left;
            font-size: 22px;
            color: #fff;
            margin: 0;
        }

        .el-header {
            background-color: #7f807f;
            color: #333;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-header style="text-align: right; font-size: 12px">
            <h1>FruitStore商城后台管理系统</h1>
            <span>欢迎{{user.nick}}回来!</span>
            <a href="javascript:void (0)" @click="logout()">退出登录</a>
        </el-header>
        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <!--默认展开:default-openeds-->
                <el-menu :default-openeds="[openIndex]" @select="menuChange">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-custom"></i>用户管理</template>
                        <el-menu-item index="1-1">用户列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-picture"></i>轮播图管理</template>
                        <el-menu-item index="2-1">轮播图列表</el-menu-item>
                        <el-menu-item index="2-2">添加轮播图</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-s-shop"></i>商品管理</template>
                        <el-menu-item index="3-1">商品列表</el-menu-item>
                        <el-menu-item index="3-2">添加商品</el-menu-item>
                        <el-menu-item index="3-3">商品类别列表</el-menu-item>
                        <el-menu-item index="3-4">添加商品类别</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-s-order"></i>订单管理</template>
                        <el-menu-item index="4-1">订单列表</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <el-table :data="userArr" v-show="index=='1-1'">
                    <!--设置表格的第一列为编号-->
                    <el-table-column type="index" label="编号" width="100"></el-table-column>
                    <!-- <el-table-column prop="id" label="编号" width="100"></el-table-column>-->
                    <el-table-column prop="username" label="用户名"></el-table-column>
                    <el-table-column prop="nick" label="昵称"></el-table-column>
                    <el-table-column prop="sex" label="性别"></el-table-column>
                    <el-table-column prop="phone" label="电话号码"></el-table-column>
                    <el-table-column prop="address" label="用户地址"></el-table-column>
                    <el-table-column prop="permissionId" label="用户权限"></el-table-column>
                    <el-table-column label="操作" header-align="center">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-row gutter="20">
                                <el-col :span="12">
                                    <el-popconfirm title="您确认注销此用户吗?">
                                        <el-button size="mini" type="danger" slot="reference" disabled>注销</el-button>
                                    </el-popconfirm>
                                </el-col>
                                <el-col :span="12">
                                    <el-button size="mini" type="primary" @click="getUserById(scope.$index,scope.row)">
                                        修改
                                    </el-button>
                                </el-col>
                            </el-row>
                            <el-dialog title="用户信息修改"
                                       :visible.sync="dialogTableVisible"
                                       width="30%"
                                       :before-close="handleClose">
                                <el-form :inline="true" size="mini" style="text-align: center">
                                    <el-form-item label=" 用 户 名 ">
                                        <el-input style="width:250px" placeholder="请输入用户名"
                                                  v-model="userUpdate.username"></el-input>
                                    </el-form-item>
                                    <el-form-item label=" 昵 称 ">
                                        <label slot="label">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                                        <el-input style="width:250px" placeholder="请输入昵称"
                                                  v-model="userUpdate.nick"></el-input>
                                    </el-form-item>
                                    <el-form-item label=" 性 别 ">
                                        <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                                        <el-select v-model="userUpdate.sex" placeholder="请选择性别" style="width:250px">
                                            <el-option label="女" value="女"></el-option>
                                            <el-option label="男" value="男"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="电话号码">
                                        <el-input style="width:250px" placeholder="请输入电话号码"
                                                  v-model="userUpdate.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户地址">
                                        <el-input style="width:250px" placeholder="请输入用户地址"
                                                  v-model="userUpdate.address"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户权限">
                                        <el-input style="width:250px" placeholder="请输入用户权限"
                                                  v-model="userUpdate.permissionId"></el-input>
                                    </el-form-item>
                                </el-form>
                                <span slot="footer" class="dialog-footer">
                                  <el-button @click="dialogTableVisible = false">取 消</el-button>
                                    <!-- <el-button type="primary" @click="dialogTableVisible = false" >确 定</el-button>-->
                                  <el-button type="primary" @click="submitUser">确 定</el-button>
                                </span>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="bannerArr" v-show="index=='2-1'">
                    <el-table-column type="index" label="编号" width="140">
                    </el-table-column>
                    <el-table-column label="轮播图" width="240px">
                        <!--scope里面装着遍历的对象-->
                        <template slot-scope="scope">
                            <!--scope.row得到当前遍历的对象-->
                            <img :src="scope.row.url" style="width: 150px; height: 90px" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column prop="categorys" label="类别" width="150px">
                    </el-table-column>
                    <el-table-column prop="bCreatDate" label="创建时间" width="200px">
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-popconfirm title="您确认删除此轮播图吗?" @confirm="bannerDelete(scope.$index,scope.row)">
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                           <!-- <el-button size="mini" type="primary" >修改</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <el-form ref="bannerUpload" :model="bannerUpload"
                         label-width="80px"
                         v-show="index=='2-2'">
                    <el-form-item label="图片类别">
                        <el-select v-model="bannerUpload.categorys" placeholder="请选择轮播图类别">
                            <el-option
                                    v-for="item in categoryArr"
                                    :key="item.cid"
                                    :label="item.cname"
                                    :value="item.cname">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图片上传">
                        <el-upload
                                action="/uploadBanner"
                                limit="1"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-success="handleSuccess"
                                :on-exceed="exceed"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="bannerUpload.url" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitBanner">立即上传</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="productArr" v-show="index=='3-1'">
                    <el-table-column type="expand" style="width: 100%">
                        <template slot-scope="props">
                            <el-form label-position="left" class="demo-table-expand">
                                <el-form-item label="商品 ID">
                                    <span>{{ props.row.id }}</span>
                                </el-form-item>
                                <el-form-item label="商品名称">
                                    <span>{{ props.row.name }}</span>
                                </el-form-item>
                                <el-form-item label="商品数量">
                                    <span>{{ props.row.count }}</span>
                                </el-form-item>
                               <!-- <el-form-item label="商品类别">
                                    <span>{{ props.row.cname }}</span>
                                </el-form-item>-->
                                <el-form-item label="商品销量">
                                    <span>{{ props.row.saleCount }}</span>
                                </el-form-item>
                                <el-form-item label="商品原价">
                                    <span>{{ props.row.oldPrice }}</span>
                                </el-form-item>
                                <el-form-item label="商品折扣">
                                    <span>{{ props.row.price }}</span>
                                </el-form-item>
                                <el-form-item label="商品描述">
                                    <span>{{ props.row.detail }}</span>
                                </el-form-item>
                                <el-form-item label="商品上架日期">
                                    <span>{{ props.row.created }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="编号" width="100"></el-table-column>
                    <el-table-column prop="name" label="商品名称" width="170"></el-table-column>
                    <el-table-column prop="count" label="商品数量" width="150"></el-table-column>
                    <el-table-column prop="price" label="折扣价/元" width="100"></el-table-column>
                    <el-table-column prop="saleCount" label="销量" width="100"></el-table-column>
                    <!--<el-table-column prop="cname" label="类别" width="100"></el-table-column>-->
                    <el-table-column label="商品图片" width="180" >
                        <!--scope里面装着遍历的对象-->
                        <template slot-scope="scope">
                            <!--scope.row得到当前遍历的对象-->
                            <img :src="scope.row.url" style="width: 100px;height: 90px" alt="你点击看看">
                        </template>
                    </el-table-column>
                    <el-table-column prop="created" label="发布时间" width="120"></el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-button size="mini" type="primary" @click="getProductById(scope.$index,scope.row)">修改</el-button>
                            <el-popconfirm title="您确认下架此商品吗?" @confirm="productDelete(scope.$index,scope.row)">
                                <el-button size="mini" type="danger" slot="reference">下架</el-button>
                            </el-popconfirm>
                            <el-dialog title="商品信息修改"
                                       :visible.sync="dialogTableVisible"
                                       width="30%"
                                       :modal-append-to-body="false" >
                                <el-form :inline="true" size="mini" style="text-align: center">
                                    <el-form-item label=" 商 品 名 ">
                                        <el-input style="width:250px" placeholder="请输入商品名"
                                                  v-model="productUpdate.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label=" 商品数量 ">
                                        <el-input style="width:250px" placeholder="请输入商品数量"
                                                  v-model="productUpdate.count"></el-input>
                                    </el-form-item>
                                    <el-form-item label=" 商品原价 ">
                                        <el-input style="width:250px" placeholder="请输入商品价格"
                                                  v-model="productUpdate.oldPrice"></el-input>
                                    </el-form-item>
                                    <el-form-item label=" 折 扣 价 ">
                                        <el-input style="width:250px" placeholder="请输入商品折扣价"
                                                  v-model="productUpdate.price"></el-input>
                                    </el-form-item>
                                    <el-form-item label=" 商品分类 ">
                                        <el-select v-model="productUpdate.cname" placeholder="请选择商品分类" style="width:250px">
                                            <el-option
                                                    v-for="item in categoryArr"
                                                    :key="item.cid"
                                                    :label="item.cname"
                                                    :value="item.cname">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label=" 商品详情 " >
                                        <el-input
                                                type="textarea"
                                                :rows="2"
                                                placeholder="请输入商品详情内容"
                                                v-model="productUpdate.detail" style="width:250px">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="商品图片上传" style="width:250px" >
                                        <el-upload
                                                action="/uploadProduct"
                                                limit="1"
                                                list-type="picture-card"
                                                :on-preview="handlePictureCardPreviewProduct"
                                                :on-success="handleSuccessProduct"
                                                :on-exceed="exceed"
                                                :on-remove="handleRemove"
                                                :modal-append-to-body="false">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
                                            <img width="100%" :src="productUpdate.url" alt="一直有问题">
                                        </el-dialog>
                                    </el-form-item>
                                </el-form>
                                <span slot="footer" class="dialog-footer">
                                  <el-button @click="dialogTableVisible = false">取 消</el-button>
                                  <el-button type="primary" @click="submitUpdateProduct">确 定</el-button>
                                </span>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>
                <el-form size="mini" v-show="index=='3-2'" style="text-align: center;width: 50%;margin: auto;" ref="productUpdate" :model="productUpdate">
                    <el-form-item label=" 商 品 名 ">
                        <el-input style="width:350px" placeholder="请输入商品名"
                                  v-model="productUpdate.name"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品数量 ">
                        <el-input style="width:350px" placeholder="请输入商品数量"
                                  v-model="productUpdate.count"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品原价 ">
                        <el-input style="width:350px" placeholder="请输入商品原价"
                                  v-model="productUpdate.oldPrice"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品分类 ">
                        <el-select v-model="productUpdate.categoryId" placeholder="请选择商品分类" style="width:350px">
                            <el-option
                                    v-for="item in categoryArr"
                                    :key="item.cid"
                                    :label="item.cname"
                                    :value="item.cid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" 商品详情 " >
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入商品详情内容"
                                v-model="productUpdate.detail" style="width:350px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品图片上传">
                        <el-upload
                                action="/uploadProduct"
                                limit="1"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreviewProduct"
                                :on-success="handleSuccessProduct"
                                :on-exceed="exceed"
                                :on-remove="handleRemove"
                                :modal-append-to-body="false" >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
                            <img width="100%" :src="productUpdate.url" alt="一直有问题">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitProduct">立即添加</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="categoryArr" v-show="index=='3-3'">
                    <el-table-column type="index" label="编号" width="140">
                    </el-table-column>
                    <el-table-column prop="cname" label="商品类别" width="200px">
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-popconfirm title="您确认删除此商品类别吗?" @confirm="categoryDelete(scope.$index,scope.row)">
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="ordersArr" v-show="index=='4-1'">
                    <!--设置表格的第一列为编号-->
                    <el-table-column type="index" label="编号" width="100"></el-table-column>
                    <el-table-column prop="oid" label="订单编号" width="250"></el-table-column>
                    <el-table-column prop="priceAll" label="订单总价"></el-table-column>
                    <el-table-column prop="username" label="所属用户"></el-table-column>
                    <el-table-column prop="phone" label="电话号码"></el-table-column>
                    <el-table-column prop="address" label="收货人地址"></el-table-column>
                    <el-table-column prop="created" label="创建时间"></el-table-column>
                    <el-table-column label="操作" header-align="center">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-row gutter="20">
                                <el-col :span="10">
                                    <el-popconfirm title="您确认删除此订单吗?" @confirm="backOrderDelete(scope.$index,scope.row)">
                                        <el-button v-if="scope.row.state == 0" size="mini" type="danger" slot="reference" disabled>删除</el-button>
                                        <el-button v-if="scope.row.state == 1" size="mini" type="danger" slot="reference">删除</el-button>
                                    </el-popconfirm>
                                </el-col>
                                <el-col :span="10">
                                    <el-button v-if="scope.row.state == 0" size="mini" type="primary" @click="backOrderUpdateStateById(scope.$index,scope.row)">
                                        待处理
                                    </el-button>
                                    <el-button v-if="scope.row.state == 1" size="mini" type="primary" disabled>
                                        已处理
                                    </el-button>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
                <el-form :inline="true" v-show="index=='5-1'"  :model="download" class="demo-form-inline" >
                    <el-form-item label="年份">
                        <el-date-picker
                                v-model="download.year"
                                type="year"
                                placeholder="选择年"
                                value-format="yyyy">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="月份">
                        <el-date-picker
                                v-model="download.month"
                                type="month"
                                placeholder="选择月"
                                value-format="M">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="downloadProduct">下载销售榜单</el-button>
                    </el-form-item>
                </el-form>
                <!-- 分页器 show = "2-1" -->
                <div class="block" style="margin-top:15px;" >
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,10,20]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="this.total"
                                   v-show="index=='2-1'">
                    </el-pagination>
                </div>
                <!-- 分页器 show = "3-1" -->
                <div class="block" style="margin-top:15px;" >
                    <el-pagination align='center' @size-change="handleSizeChangeProduct" @current-change="handleCurrentChangeProduct"
                                   :current-page="currentPageProduct"
                                   :page-sizes="[1,5,10,20]"
                                   :page-size="pageSizeProduct"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="this.totalProduct"
                                   v-show="index=='3-1'">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </el-container>
    <!--抽屉组件开始
      direction:代表方向rtl(从右到左)(right to left)/ltr(左到右)/ttb(上到下)/btt(下到上)
      size:弹出内容占屏幕的百分比
      :visible.sync 让抽屉是否显示和一个变量进行绑定 true显示 false不显示-->
    <el-drawer title="添加分类"
               :visible.sync="drawer"
               direction="ttb"
               size="25%"
               @click="open()">
        <el-form>
            <el-form-item label="商品类别" label-width="80px">
                <el-input style="width: 500px" v-model="categoryName"></el-input>
                <el-button type="success" @click="addCategory">添加分类</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data() {
            return {
                bannerUpload: {
                    categorys: "",
                    url: '',
                },
                download:{
                    year:"",
                    month:"",
                },
                options:[],
                user: {},
                userUpdate: {},
                productUpdate:{},
                userArr: [],
                productArr: [],
                ordersArr:[],
                categoryArr: [],
                bannerArr: [],
                categoryName: "",
                drawer: false,
                dialogTableVisible: false,
                dialogVisible: false,
                index: "1-1",
                openIndex: "1",
                currentPage: 1, // 当前页码
                total: '', // 总条数
                pageSize: 5, // 每页的数据条数
                currentPageProduct: 1, // 当前页码
                totalProduct: '', // 总条数
                pageSizeProduct: 5, // 每页的数据条数
            }
        },
        created: function () {
            axios.get("/currentUser").then(function (response) {
                v.user = response.data;
            })
            //得到地址栏中的参数
            if (location.search.indexOf('index') != -1) {
                //才地址栏中的？index=2-1 取出2-1
                this.index = location.search.split("=")[1];
                //取出2-1里面的2
                this.openIndex = this.index.split("-")[0];
            }
            //发请求获取所有分类数据 this代表当前Vue对象
            //此处的this不能用v代替 created方法执行时 v还没有赋值
            this.loadCategory();
            //created方法中只能用this axios发送请求后只能用v
            this.loadBanner();
            //发请求获取所有商品信息
            this.loadProduct();
            this.loadUser();
            //轮播图分页
            this.bannerPage();
            //商品分页
            this.productPage();
            //获取订单
            this.loadOrder();
        },
        methods: {
            /* ************ 销量榜单下载 **************/
            downloadProduct(){
                console.log(v.download);
                if(v.download.year==null || v.download.month==null){
                    v.$message.error("请选择对应的年份或者月份!");
                    return;
                };
                axios.post("/baseProduct/downloadProduct/",v.download).then(function (response) {
                    /*location.href="/admin.html?index=5-1";*/
                })
            },
            /* ************ 轮播图分页开始 **************/
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this.bannerPage();
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.bannerPage();
            },
            //轮播图分页
            bannerPage(){
                that = this;
                axios.get("/backBanner/page/" +that .currentPage + "/" + that.pageSize).then((response)=>{
                    that.bannerArr = response.data.records;
                    //console.log(v.bannerArr);
                    that.total = response.data.total;
                })
            },
            /* ************ 轮播图分页结束 **************/

            /* ************ 商品分页开始 **************/
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChangeProduct(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this. productPage();
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChangeProduct(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this. productPage();
            },
            //轮播图分页
            productPage(){
                that = this;
                axios.get("/baseProduct/page/" +that .currentPage + "/" + that.pageSize).then((response)=>{
                    that.productArr = response.data.records;
                    that.totalProduct = response.data.total;
                })
            },
            /* ************ 商品分页结束 **************/
            /*轮播图图片上传数据*/
            onSubmitBanner(){
                //判断是否选择了图片
                if (v.bannerUpload.url == ""){
                    v.$message.error("请选择上传的图片!");
                    return;
                }
                //发布轮播图请求
                //console.log(v.bannerUpload);
                axios.post("/backBanner/insertBanner/",v.bannerUpload).then(function (response) {
                    //发布成功后跳转回管理页面
                    v.loadBanner();
                    location.href="/admin.html?index=2-1";
                })
            },
            /*添加商品数据*/
            onSubmitProduct(){
                if (v.productUpdate.url == ""){
                    v.$message.error("请选择上传的图片!");
                    return;
                }
                axios.post("/baseProduct/insertProduct/",v.productUpdate).then(function (response) {
                    //发布成功后跳转回管理页面
                    v.loadProduct();
                    location.href="/admin.html?index=3-1";
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                console.log(file.response);
                axios.get("/remove/" + file.response).then(function (response) {
                    console.log("删除完成!");
                    v.url="";
                })
            },
            handleSuccess(response,file, fileList) {
                //response代表上传成功时服务器返回的图片路径
                v.bannerUpload.url=response;
            },
            handleSuccessProduct(response,file, fileList) {
                //response代表上传成功时服务器返回的图片路径
                v.productUpdate.url=response;
            },
            exceed(){
                v.$message.error("图片只能选择1个!");
            },
            handlePictureCardPreviewProduct(file) {
                this.productUpdate.url = file.url;
                this.dialogVisible = true;
            },
            handlePictureCardPreview(file) {
                this.bannerUpload.url = file.url;
                this.dialogVisible = true;
            },
            /*关闭弹窗，清空所有的数据*/
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            /*根据用户Id查找用户信息*/
            getUserById(index, userUpdate) {
                v.dialogTableVisible = true;
                axios.get("/backUsers/getUserById/" + userUpdate.id).then(function (response) {
                    v.userUpdate = response.data.data;
                })
            },
            /*根据用户Id查找用户信息*/
            getProductById(index, productUpdate) {
                v.dialogTableVisible = true;
                axios.get("/baseProduct/getProductVOById/" + productUpdate.id).then(function (response) {
                    v.productUpdate = response.data.data;
                })
            },
            /*用户信息修改提交*/
            submitUser() {
                axios.post("/backUsers/updateUserById/", v.userUpdate).then(function (response) {
                    //console.log(response.data.state);
                    if (response.data.state == 2000) {
                        v.$message.success("修改用户数据成功!");
                        v.dialogTableVisible = false;
                        v.loadUser();
                    } else {
                        v.$message.error("修改用户数据失败!请检查相关信息");
                    }
                })
            },
            submitUpdateProduct(){
                if (v.productUpdate.url == ""){
                    v.$message.error("请选择上传的图片!");
                    return;
                }
                console.log(v.productUpdate);
                axios.post("/baseProduct/updateProduct/", v.productUpdate).then(function (response) {
                    //console.log(response.data.state);
                    if (response.data.state == 2000) {
                        v.$message.success("修改用户数据成功!");
                        v.dialogTableVisible = false;
                        v.loadProduct();
                    } else {
                        v.$message.error("修改用户数据失败!请检查相关信息");
                    }
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            loadUser() {
                axios.get("/backUsers/findUserAll").then(function (response) {
                    v.userArr = response.data.data;
                })
            },
            loadProduct() {
                axios.get("/baseProduct/findProductVOAll").then(function (response) {
                    v.productArr = response.data.data;
                })
            },
            loadBanner() {
                axios.get("/backBanner/findBannerAll").then(function (response) {
                    v.bannerArr = response.data.data;
                })
            },
            loadOrder(){
                axios.get("/backOrder/findOrderAll").then(function (response) {
                    v.ordersArr=response.data.data;
                })
            },
            backOrderDelete(index,orderArr){
                axios.get("/backOrder/orderDelete/" + orderArr.oid).then(function (response) {
                    v.loadOrder();
                })
            },
            backOrderUpdateStateById(index,orderArr){
                axios.get("/backOrder/updateStateById/"+orderArr.oid).then(function (response) {
                    v.loadOrder();
                })
            },
            addCategory() {
                //发出添加分类的请求
                axios.get("/baseCategory/insertCategory/" + v.categoryName).then(function (response) {
                    //让抽屉收回
                    v.drawer = false;
                    v.loadCategory();
                })
            },
            loadCategory() {
                axios.get("/category/select").then(function (response) {
                    v.categoryArr = response.data;
                })
            },
            menuChange(index) {
                if (index == "3-4") {
                    v.drawer = true;
                } else {
                    v.index = index;
                }
            },
            categoryDelete(index, category) {
                axios.get("/baseCategory/deleteCategory/" + category.cid).then(function (response) {
                    //重新加载分类数据 因为此处开了子线程删除分类,当此处代码执行时
                    //this 已经不是vue对象了 只能使用v访问方法
                    v.loadCategory();
                    v.$message({
                        showClose: true,//是否显示关闭按钮
                        message: "删除成功!",
                        type: "success"
                    })
                })
            },
            bannerDelete(index, banner) {
                //发出删除轮播图请求
                axios.get("/backBanner/deleteBanner/" + banner.id).then(function (response) {
                    v.loadBanner();
                    v.$message({
                        showClose: true,//是否显示关闭按钮
                        message: "删除成功!",
                        type: "success"
                    })
                })
            },
            productDelete(index, product) {
                //发出删除商品下架请求
                axios.get("/baseProduct/deleteProductById/" + product.id).then(function (response) {
                    v.loadProduct();
                    v.$message({
                        showClose: true,//是否显示关闭按钮
                        message: "删除成功!",
                        type: "success"
                    })
                })
            },
            logout() {
                axios.get("/loginOut").then(function (response) {
                    if(response.data===1){
                        location.href="login.html"
                    }else {
                        v.$message.error("退出失败！");
                    }
                })
            }
        }
    })
</script>
</html>